<template>
  <div id="log-in">
    <el-card class="log">
      <div class="fl left">
        <img src="../assets/images/login.png"
             alt="">
      </div>
      <div class="right">
        <el-form :model="form"
                 ref="form"
                 :rules="rules">
          <div class="title">Welcome to luxsens</div>
          <el-form-item prop="user">
            <el-input v-model="form.user"
                      placeholder="Username:"
                      auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input v-model="form.pass"
                      placeholder="Password:"
                      auto-complete="off"
                      type="password"></el-input>
          </el-form-item>
          <div class="remember">
            <el-checkbox size="large"
                         v-model="form.remember"></el-checkbox>
            <span class="text">Remember me</span>
          </div>
          <el-form-item>
            <el-button class="log-button"
                       type="primary"
                       @click="logIn">Login</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data() {
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter user!"));
      } else if (value != "Aidaa") {
        callback(new Error("User name does not exist!"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter pass!"));
      } else if (value != "luxsens123456") {
        callback(new Error("Password is incorrect!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        user: "",
        pass: "",
        remember: true
      },
      rules: {
        user: [{ validator: validateUser, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  created() {
    let user = localStorage.getItem("lux-user");
    let pass = localStorage.getItem("lux-pass");
    if (user) {
      this.form.user = user;
      this.form.pass = pass;
    }
  },
  methods: {
    logIn() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.remember) {
            localStorage.setItem("lux-user", this.form.user);
            localStorage.setItem("lux-pass", this.form.pass);
          }
          Vue.prototype.access = true;
          this.$router.push({ name: "productHome" });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../assets/styles/color.scss";
@import "../assets/styles/mixins.scss";

#log-in {
  background-color: $bgColor;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;

  .el-card {
    .el-card__body {
      padding: 0;
      .left {
        width: 42%;
        height: 36rem;
        background-color: #fff;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        width: 58%;
        overflow: hidden;
        height: 36rem;
        .el-form {
          margin: 0 auto;
          width: 24rem;
          margin-top: 7.2rem;
          .title {
            font-size: 2rem;
            margin-bottom: 4.8rem;
          }
          .el-input__inner {
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #dcdfe6;
            padding-left: 5px;
          }
          .remember {
            text-align: left;
            margin-bottom: 3rem;
            .el-checkbox__inner {
              width: 18px;
              height: 18px;
            }
            .el-checkbox__inner::after {
              height: 8px;
              width: 5px;
              top: 2px;
              left: 6px;
            }
            .text {
              color: #999;
              font-size: 0.85rem;
              margin-left: 4px;
            }
          }
          .log-button {
            width: 24rem;
            height: 2.8rem;
            font-size: 1rem;
            // font-style: 1.7rem;
          }
        }
      }
    }
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 66rem;
    height: 36rem;
    .el-form-item__label {
      width: 100px;
      text-align: left;
    }
  }
}
</style>
